<template>
  <div class="new-dashboard-container">
    <div class="item1">
      <p>
        今日灭治数据
      </p>
      <div class="card">
        <div v-for="(item, index) in tableData" :key="index" class="box1">
          <div class="box-key">{{ item.key }}</div>
          <div class="name" @click="next2(item.key)">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="item1">
      <p>
        本月白蚁灭治申请分布
      </p>
      <div class="card">
        <div class="box">
          <div
            v-for="(item, index) in distributionList"
            :key="index"
            class="box-item"
          >
            <div class="item-key">{{ item.key }}</div>
            <div class="item-vaule" @click="next">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item1">
      <p>
        近7日灭治申请数量
      </p>
      <div class="card">
        <div id="chart" />
      </div>
    </div>
    <div class="item1">
      <p>
        本月竣工项目待安装白蚁预防装置
      </p>
      <div class="card">
        <div class="box">
          <div
            v-for="(item, index) in distributionList"
            :key="index"
            class="box-item"
          >
            <div class="item-key">{{ item.key }}</div>
            <div class="item-vaule">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      distributionList: [
        {
          key: '余杭街道',
          value: '31'
        },
        {
          key: '仓前街道',
          value: '5'
        },
        {
          key: '闲林街道',
          value: '2'
        },
        {
          key: '五常街道',
          value: '0'
        },
        {
          key: '中泰街道',
          value: '13'
        },
        {
          key: '仁和街道',
          value: '54'
        },
        {
          key: '良渚街道',
          value: '2'
        },
        {
          key: '瓶窑街道',
          value: '5'
        },
        {
          key: '径山镇',
          value: '2'
        },
        {
          key: '黄湖镇',
          value: '0'
        },
        {
          key: '鸬鸟镇',
          value: '31'
        },
        {
          key: '百丈镇',
          value: '31'
        },
        {},
        {},
        {}
      ],
      tableData: [
        {
          key: '50',
          name: '灭治申请'
        },
        {
          key: '30',
          name: '完成灭治'
        },
        {
          key: '10',
          name: '未灭治'
        }
      ]
      // tableData: [
      //   {
      //     date: '灭治申请',
      //     name: '完成灭治',
      //     address: '未灭治'
      //   }
      // ],
      // tableData1: [
      //   {
      //     date: '31',
      //     date1: '5',
      //     date2: '2',
      //     date3: '0',
      //     date4: '13'
      //   }
      // ]
    }
  },

  computed: {
    ...mapGetters(['name'])
  },
  mounted() {
    var chartDom = document.getElementById('chart')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['灭治', '申请']
      },

      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'line',
          name: '灭治',
          data: [5, 11, 3, 8, 12, 12, 3]
        },
        {
          type: 'line',
          name: '申请',
          data: [11, 3, 5, 1, 16, 5, 10],

          markLine: {
            data: [
              [
                {
                  symbol: 'none',
                  x: '90%',
                  yAxis: 'max'
                },
                {
                  symbol: 'circle',
                  label: {
                    position: 'start'
                  }
                }
              ]
            ]
          }
        }
      ]
    }

    option && myChart.setOption(option)
  },
  methods: {
    next() {
      this.$router.push('/Harmful')
    },
    next2(key) {
      const list = {
        50: '/GovernanceService/Desperate',
        30: '/GovernanceService/Dispatch?tabindex=third',
        10: '/GovernanceService/Dispatch'
      }
      this.$router.push(list[key])
    }
  }
}
</script>

<style lang="scss" scoped>
.new-dashboard-container {
  background-color: #f4f5f6;
  display: flex;
  flex-wrap: wrap;
  padding: 0 24px;
  justify-content: space-around;
  height: 885px;

  .item1 {
    width: 48%;
    height: 35%;
    font-size: 18px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #181818;
    line-height: 18px;

    .card {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 330px;
      background: #ffffff;
      border-radius: 20px;
      overflow: hidden;
      padding: 20px;
      .box {
        width: 100%;
        height: 100%;
        border: 0.5px solid #ccc;
        display: flex;
        flex-wrap: wrap;
        .box-item {
          border: 0.5px solid #ccc;
          width: 20%;
          height: 96px;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          > div {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: center;
            height: 44px;
            // border-bottom: 1px solid #ccc;
          }
          .item-key {
            background-color: #f2f2f2;
            border-bottom: 2px solid #ccc;
            font-size: 14px;
          }
          .item-vaule {
            font-size: 14px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.box1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #eee;
  border-bottom: none;
  font-size: 14px;
}

.name {
  align-content: center;
  border-bottom: 1px solid #cccccc;
  padding: 15px 20px;
  border-top: 1px solid #cccccc;
  cursor: pointer;
}
.box-key {
  padding: 15px 20px;
}
#chart {
  width: 700px;
  height: 300px;
}
</style>
